<template>
  <div class="share-poster">
    <div class="top">
      <div class="title-wrapper">
        <div class="title">分享海报</div>
      </div>
    </div>
    <div class="content">
      <el-form label-width="180px">
        <el-form-item label="商品分享海报背景：">
          <template>
            <div class="goods-box">
              <el-form label-width="100px">
                <el-form-item label="上传图片：">
                  <my-upload :height="226" :img="form1.poster_cover" :width="375" @success="goodsCoverSuccess" />
                </el-form-item>
                <el-form-item label="标语：">
                  <el-input v-model="form1.title" placeholder="请输入标语" size="mini" />
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                  <el-button type="primary" @click.native="saveGoodsPoster">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="VIP二维码分享海报背景：">
          <template>
            <div class="goods-box">
              <el-form label-width="100px">
                <el-form-item label="上传图片：">
                  <my-upload :height="226" :img="form2.poster_cover" :width="375" @success="vipCoverSuccess" />
                </el-form-item>
                <el-form-item label="标语：">
                  <el-input v-model="form2.title" placeholder="请输入标语" size="mini" />
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                  <el-button type="primary" @click.native="saveVipPoster">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import MyUpload from '@/views/add-editor/component/my-upload'
import { setPosterCover, getPosterCover } from '@/api/vip'
const ERR_OK = 200
export default {
  components: {
    MyUpload
  },
  data() {
    return {
      form1: {
        poster_cover: '',
        title: ''
      },
      form2: {
        poster_cover: '',
        title: ''
      },
      list: []
    }
  },
  watch: {
    list(newVal) {
      newVal.forEach((item, index) => {
        if (item.poster_type === 1) {
          this.form1.poster_cover = item.poster_cover
          this.form1.title = item.title
        } else if (item.poster_type === 2) {
          this.form2.poster_cover = item.poster_cover
          this.form2.title = item.title
        }
      })
    }
  },
  created() {
    this._getPosterCover()
  },
  methods: {
    goodsCoverSuccess(imgUrl) {
      this.form1.poster_cover = imgUrl
    },
    vipCoverSuccess(imgUrl) {
      this.form2.poster_cover = imgUrl
    },
    saveGoodsPoster() {
      this._setPosterCover(Object.assign({ id: 1 }, this.form1))
    },
    saveVipPoster() {
      this._setPosterCover(Object.assign({ id: 2 }, this.form2))
    },
    _setPosterCover({ id, poster_cover, title }) {
      setPosterCover({ id, poster_cover, title })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this._success(res.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getPosterCover() {
      getPosterCover()
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.list
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _success(message) {
      this.$message({
        type: 'success',
        message,
        showClose: true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/el-button.scss';
.share-poster {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
  .content {
    .goods-box {
      width: 500px;
      min-height: 337px;
      background-color: rgba(250, 250, 250, 1);
      border: 1px solid rgba(235, 238, 245, 1);
      padding: 20px;
      box-sizing: border-box;
    }
  }
}
</style>
